<template>
  <!-- 单个商品页面 -->
  <div>
    <!-- 返回上级按钮 -->
    <div @click="goStore">
      &nbsp;&nbsp;<van-icon
        name="arrow-left"
        style="float: left; margin: 10px" />
    </div>
    <van-tabs
      v-model="activeName"
      color="#1989FA"
      title-active-color="#1989FA">
      <!-- 标签页 -->
      <van-tab title="商品" name="a">
        <!-- 轮播图：商品图片 -->
        <van-swipe :autoplay="3000">
          <!-- 循环拿到的该商品的图片 -->
          <van-swipe-item v-for="item in productImages" :key="index">
            <img
              :src="item.imageurl"
              style="height: 300px; width: 100%; border-radius: 7px" />
          </van-swipe-item>
        </van-swipe>
        <!-- 积分 -->
        <div
          style="width: 100%; height: 45px; background-color: #66c6f2"
          v-if="(product.integral != '')&& (product.coupon == '')">
          <span
            style="
              font-size: 26px;
              color: white;
              display: block;
              margin-left: 20px;
              margin-top: 5px;
              float: left;
            ">
            <!-- 积分赋值 -->
            {{ product.integral }}
          </span>
          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-left: 4px;
              margin-top: 10px;
              float: left;
            ">
            <span>积分&nbsp;&nbsp;</span>

            <span style="text-decoration: line-through"
              >价格￥{{ product.price }}
            </span>
          </span>

          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-right: 20px;
              margin-top: 10px;
              float: right;
            ">
            月售量{{ product.prompt }}件</span
          >
        </div>
        <!-- 余额 -->
        <div
          style="width: 100%; height: 45px; background-color: #66c6f2"
          v-if="(product.integral == '') && (product.coupon != '')">
          <span
            style="
              font-size: 26px;
              color: white;
              display: block;
              margin-left: 20px;
              margin-top: 5px;
              float: left;
            ">
            <!-- 现价 -->
            {{ product.coupon }}
          </span>
          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-left: 4px;
              margin-top: 10px;
              float: left;
            ">
            <span>元&nbsp;&nbsp;</span>

            <span style="text-decoration: line-through"
              >原价￥{{ product.price }}
            </span>
          </span>

          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-right: 20px;
              margin-top: 10px;
              float: right;
            ">
            月售量{{ product.prompt }}件</span
          >
        </div>

        <div
          style="width: 100%; height: 45px; background-color: #66c6f2"
          v-if="(product.integral != '') && (product.coupon != '')">

           <span
            style="
              font-size: 26px;
              color: white;
              display: block;
              margin-left: 20px;
              margin-top: 5px;
              float: left;
            ">
            <!-- 积分赋值 -->
            {{ product.integral }}
            <span>积分 +</span>
          </span>

          <span
            style="
              font-size: 26px;
              color: white;
              display: block;
              margin-left: 20px;
              margin-top: 5px;
              float: left;
            ">
            <!-- 现价 -->
            {{ product.coupon }}
          </span>
          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-left: 4px;
              margin-top: 10px;
              float: left;
            ">
            <span>元&nbsp;&nbsp;</span>

            <span style="text-decoration: line-through"
              >原价￥{{ product.price }}
            </span>
          </span>

          <span
            style="
              font-size: 16px;
              color: white;
              display: block;
              margin-right: 20px;
              margin-top: 10px;
              float: right;
            ">
            月售量{{ product.prompt }}件</span
          >
        </div>

        <div style="width: 100%; height: 135px">
          <van-cell-group>
            <van-cell
              v-model="productName"
              style="font-size: 20px; height: 45px" />
            <van-col
              style="
                text-align: left;
                font-size: 20px;
                padding: 10px 16px;
                width: 30%;
              ">运费</van-col>
            <van-col
              @click="show = true"
              style="
                text-align: right;
                font-size: 20px;
                padding: 10px 16px;
                width: 70%;
              "
              >免运费部分地区不包邮<van-icon name="arrow"
            /></van-col>

            <van-col
              style="
                text-align: left;
                font-size: 20px;
                padding: 10px 16px;
                margin-right: 180px;
                margin-left: -3px;
              "
              span="7"
              >温馨提示</van-col
            >

            <van-col
              span="5"
              @click="show1 = true"
              style="text-align: right; font-size: 20px; padding: 10px 16px"
              ><van-icon name="ellipsis"
            /></van-col>
          </van-cell-group>
        </div>
        <!-- 弹框 -->
        <van-action-sheet v-model="show" title="运费说明">
          <div class="content">免运费部分地区不包邮</div>
        </van-action-sheet>

        <!-- 弹框 -->
        <van-action-sheet v-model="show1" title="温馨提示">
          <div class="content">
            商品有每家店主自行上架，消费所产生的的积分仅限在本店使用
          </div>
        </van-action-sheet>

        <van-row style="width: 100%; height: 6px; background-color: #f1f3f4">
          <van-col span="24"></van-col>
        </van-row>
        <!-- 商品评价 -->

        <van-row @click="goEvaluate" style="height: 45px; padding: 10px 16px">
          <van-col
            span="16"
            style="
              text-align: left;
              font-size: 22px;
              font-weight: bold;
              width: 50%;
              float: left;
            "
            >商品评价({{ good.length }})</van-col
          >
          <van-col
            span="8"
            style="
              text-align: right;
              font-size: 16px;
              width: 50%;
              float: right;
            "
            ><van-icon name="arrow"
          /></van-col>
        </van-row>

        <!-- 用户评价 -->
        <div
          style="padding: 10px 16px"
          v-for="(item, index) in good"
          :key="index"
          v-if="index < 2">
          <van-row style="width: 100%; height: 45px">
            <van-col span="12">
              <!-- 头像 -->
              <van-image
                v-if="item.avatar == null"
                round
                width="10rem"
                height="10rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                style="width: 40px; height: 40px; float: left" />
              <van-image
                v-if="item.avatar != null"
                round
                width="10rem"
                height="10rem"
                :src="item.avatar"
                style="width: 40px; height: 40px; float: left" />
              <div style="margin-left: 55px">
                <!-- 用户名 -->
                <div
                  style="text-align: left; color: gray"
                  v-if="item.userName == null">
                  匿名用户
                </div>
                <div
                  style="text-align: left; color: gray"
                  v-if="item.userName != null">
                  {{ item.userName }}
                </div>
                <!-- 评级星星 -->
                <van-rate
                  v-model="item.starlevel"
                  :size="20"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee" />
              </div>
            </van-col>
            <!-- 评价时间 -->
            <van-col span="12" style="text-align: right; color: gray">
              {{ item.evaluatetime }}
            </van-col>
          </van-row>
          <van-row>
            <!-- 评价内容 -->
            <van-col span="24" style="text-align: left; margin: 10px 0px">{{
              item.evaluate
            }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24" style="text-align: left; margin: 10px 0px"
              ><van-image
                width="100"
                height="100"
                :src="item.image"
                radius="8px"
            /></van-col>
          </van-row>
        </div>

        <!-- 分割线 -->
        <van-row style="width: 100%; height: 6px; background-color: #f1f3f4">
          <van-col span="24"></van-col>
        </van-row>

        <!-- 店铺 -->
        <van-row style="width: 100%; height: 1px; background-color: #f1f3f4">
          <van-col span="24"></van-col>
        </van-row>
        <van-row style="height: 65px; padding: 20px">
          <van-col span="24">
            <!-- 店铺图片 -->
            <van-image
              width="70"
              height="70"
              :src="product.storeimage"
              radius="8px"
              style="float: left" />
            <div style="margin-left: 85px">
              <div style="text-align: left; margin: 10px 0px">
                {{ product.stName }}
                <span style="float: right; margin-right: 30px"
                  ><van-tag type="primary" size="large" @click="jump(product)"
                    >进店逛逛</van-tag
                  >
                </span>
              </div>
              <van-rate
                v-model="product.country"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                style="float: left" />
              <div style="float: left; color: gray; margin-left: 5px">
                3人收藏
              </div>
            </div>
          </van-col>
        </van-row>

        <!-- 商品详情 -->
        <van-row style="height: 6px; background-color: #f1f3f4">
          <van-col span="24"></van-col>
        </van-row>
        <van-row style="height: 400px; padding: 10px 16px">
          <van-col span="24">
            <div style="font-size: 22px; text-align: left; margin: 15px 0px">
              商品详情
            </div>
            <div
              style="
                font-size: 18px;
                text-align: left;
                font-weight: bold;
                padding: 10px;
                line-height: 35px;
              ">
              兑换券兑换流程: 1、进入ETCC公众号
              2、点击“我要洗车”，选择969顺和店
              3、在“门店商品”选择要兑换的商品每月1日、16日为兑换券充值日，集中为客户进行充值.
              4 余额查询流程: 1、进入ETCC公众号
              2、点击“我要洗车”，选择969顺和店 3、点击左上角返回公众号首页
              4、右下角点击“我的”，选择“我的余额”进行余额和每次充值、消费记录查询。
            </div>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">&nbsp;</van-col>
        </van-row>
        <van-row>
          <van-col span="24">&nbsp;</van-col>
        </van-row>
        <van-row>
          <van-col span="24">&nbsp;</van-col>
        </van-row>
        <van-row>
          <van-col span="24">&nbsp;</van-col>
        </van-row>
        <!-- 底部标签 -->
        <!-- 门店和立即兑换 -->
        <van-tabbar style="height: 50px">
          <van-tabbar-item style="color: black">
            <van-icon name="shop-o" size="30" />
            <span style="font-size: 20px" @click="jump(productName)"
              >门店</span
            >
          </van-tabbar-item>

          <van-tabbar-item style="background-color: #fc5531; color: white"
            ><span style="font-size: 20px" @click="goOrder"
              >立即兑换</span
            ></van-tabbar-item
          >
        </van-tabbar>
      </van-tab>
      <van-tab title="详情" name="b">
        <div class="productDetails">
          兑换券兑换流程: 1、进入ETCC公众号 2、点击“我要洗车”，选择969顺和店
          3、在“门店商品”选择要兑换的商品每月1日、16日为兑换券充值日，集中为客户进行充值.
          4 余额查询流程: 1、进入ETCC公众号 2、点击“我要洗车”，选择969顺和店
          3、点击左上角返回公众号首页
          4、右下角点击“我的”，选择“我的余额”进行余额和每次充值、消费记录查询。
        </div>
      </van-tab>
      <van-tab title="评论" name="c">
        <!-- 用户评价 -->
        <div
          style="padding: 10px 16px"
          v-for="(item, index) in good"
          :key="index"
          v-if="index < 3">
          <van-row style="width: 100%; height: 45px">
            <van-col span="12">
              <!-- 头像 -->
              <van-image
                v-if="item.avatar == null"
                round
                width="10rem"
                height="10rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                style="width: 40px; height: 40px; float: left" />
              <van-image
                v-if="item.avatar != null"
                round
                width="10rem"
                height="10rem"
                :src="item.avatar"
                style="width: 40px; height: 40px; float: left" />
              <div style="margin-left: 55px">
                <!-- 用户名 -->
                <div
                  style="text-align: left; color: gray"
                  v-if="item.userName == null">
                  匿名用户
                </div>
                <div
                  style="text-align: left; color: gray"
                  v-if="item.userName != null">
                  {{ item.userName }}
                </div>
                <!-- 评级星星 -->
                <van-rate
                  v-model="item.starlevel"
                  :size="20"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee" />
              </div>
            </van-col>
            <!-- 评价时间 -->
            <van-col span="12" style="text-align: right; color: gray">
              {{ item.evaluatetime }}
            </van-col>
          </van-row>
          <van-row>
            <!-- 评价内容 -->
            <van-col span="24" style="text-align: left; margin: 10px 0px">{{
              item.evaluate
            }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24" style="text-align: left; margin: 10px 0px"
              ><van-image
                width="100"
                height="100"
                :src="item.image"
                radius="8px"
            /></van-col>
          </van-row></div
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式
  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      activeName: "a",
      productImages: {},
      product: {}, //存放从上个页面传过来的商品信息
      value: 5, //星星点亮个数
      show: false, //运费弹框是否显示
      show1: false, //温馨提示弹框是否显示
      currentPage: 1, //当前页数
      pageSize: 100, //每页的数量
      productName: "", //给商品名称赋值
      storeimage: "", //给门店图片赋值
      good: [],
    };
  },
  created() {
    this.queryProductImage();
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //判断是否有评论
    queryStore(storeId) {
      //查询门店
      var _this = this;
      console.log("。。。。。");
      this.$http
        .get(
          "/tbGoodsComment/queryStore?storeId=" +
            storeId +
            "&score=" +
            0 +
            "&isimage=" +
            ""
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.good = response.data.data;
          }
        })
        .catch(function (error) {
          _this.$toast("获取商品评价信息时出错");
        });
    },

    //  方法事件处理
    //跳转商城页面
    goStore() {
      this.$router.push("/store");
    },
    //挑战店铺页面
    jump(store) {
      //alert("执行了吗" + JSON.stringify(store));
      this.$router.push({
        path: "/StoreCheck",
        query: {
          data: JSON.stringify(store),
        },
      });
    },

    //跳转商城页面
    goEvaluate() {
      //alert(JSON.stringify(this.product.storeIdA));
      //  商品评论
      this.$router.push({
        name: "evaluate",
        query: { storeId: this.product.storeIdA },
      });
    },
    //跳转 立即兑换
    goOrder() {
      this.$router.push({
        path: "/singleOrder",
        query: {
          data: JSON.stringify(this.product),
        },
      });
    },
    //查询商品图片表
    queryProductImage() {
      //拿到上个页面传过来的参数
      const dataParam = this.$route.query.data;
      //将数据解析为对象或者数据
      if (dataParam) {
        const product = JSON.parse(dataParam);
        // alert("拿到了吗" + product.productId);
        var _this = this;
        this.$http
          .post("/goodsImage/queryAllStore", {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            data: { pictureid: product.commodityId },
          })
          .then(function (response) {
            console.log(JSON.stringify(response.data.data));
            // alert(JSON.stringify(response.data.data.records));
            _this.productImages = response.data.data.records;
            // alert(JSON.stringify(_this.productTypes));
            _this.product = product;
            //  alert(JSON.stringify(_this.product) + "执行了嘛");
            //给商品名称赋值
            _this.productName = product.commodityName;
            //给门店封面赋值
            _this.storeimage = product.imageurl;
            _this.queryStore(product.storeIdA);
            // alert(_this.storeimage+"执行了嘛=======")
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  },

  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
.content {
  padding: 16px 16px 160px;
  text-align: left;
}
.productDetails {
  /* 让盒子居中显示，内边距为20px 字体右居中 */
  margin: 0px auto;
  padding: 20px;
  text-align: left;
}
/* 添加收货地址css */
.btn {
  width: 80%;
  background-color: rgb(31, 164, 217);
  border: 0;
}
</style>
